import { Callout } from 'nextra/components'
import { Badge } from '/components/badge'

# Configuration Options

The default configuration of Umo Viewer. You can visit https://www.umodoc.com/en/demo?target=viewer to modify and preview some configurations online in real-time.

## All Configuration Options

```js showLineNumbers
{
  lang: 'zh-CN',
  theme: 'light',
  mode: ['html', 'pdf'],
  title: undefined,
  meta: [],
  showHeader: true,
  showAside: false,
  editable: false,
  printable: true,
  downloadable: true,
  closeable: false,
  shareUrl: undefined,
  html: undefined,
  pdf: undefined,
  showMultiPage: false,
  fitWidth: false,
  needPassword: false,
}
```

## Configuration Details

### lang

**Description**: Default language. Options: `zh-CN`, `en-US`.

**Type**: `string`

**Default**: `zh-CN`

**Required**: No

### theme

**Description**: Default theme. Options: `light`, `dark`, `auto`.

**Type**: `string`

**Default**: `light`

**Required**: No

### mode

**Description**: Document preview mode. If both `pdf` and `html` are configured, a toggle button will appear for users to switch between the two modes. If only one is configured, the toggle will not appear. Note: The order of the array determines the preview mode order; the first item is the default preview mode, and the toggle list follows this order.

**Type**: `string[]`

**Default**: `['pdf', 'html']`

**Required**: No

### title

**Description**: Document title.

**Type**: `string`

**Default**: `undefined`

**Required**: Yes

### meta

**Description**: Document metadata, used to display additional document information. Each item contains `label` and `content` properties. Default is `[]`.

**Type**: `object[]`

**Default**: `[]`

**Required**: No

**Example**:

```js
meta: [
  {
    label: 'Author',
    content: 'Umo Team',
  },
  {
    label: 'Description',
    content: 'Umo Viewer is a PDF document viewer that also supports rich text preview.',
  },
  {
    label: 'Created At',
    content: '2025-09-01 00:00:00',
  },
  // ...
]
```

### showHeader

**Description**: Whether to display the top navigation bar.

**Type**: `boolean`

**Default**: `true`

**Required**: No

### showAside

**Description**: Whether to expand the left sidebar by default. The sidebar mainly displays document thumbnails, outlines, and metadata.

**Type**: `boolean`

**Default**: `false`

**Required**: No

### editable

**Description**: Whether the document is editable. Default is `false`. If set to `true`, you must configure the [onEdit event](./events#onedit).

**Type**: `boolean`

**Default**: `false`

**Required**: No

### printable

**Description**: Whether the document can be printed. Default is `true`.

**Type**: `boolean`

**Default**: `true`

**Required**: No

### downloadable

**Description**: Whether the document can be downloaded. Default is `true`.

**Type**: `boolean`

**Default**: `true`

**Required**: No

### closeable

**Description**: Whether to display a close button. Default is `false`. If set to `true`, a close button will appear in the top navigation bar, and you must configure the [onClose event](./events#onclose).

**Type**: `boolean`

**Default**: `false`

**Required**: No

### shareUrl

**Description**: Document sharing URL. Default is `undefined`. If not set, the share button will not be displayed.

**Type**: `string`

**Default**: `undefined`

**Required**: No

### html

**Description**: The HTML rich text document content to preview. In Umo Editor, you can get the rich text document through the [`getVanillaHTML`](../editor/methods#getvanillahtml) method.

**Type**: `string`

**Default**: `undefined`

**Required**: Required if `mode` includes `html`.

### pdf

**Description**: The URL of the PDF document to preview.

**Type**: `string`

**Default**: `undefined`

**Required**: Required if `mode` includes `pdf`.

### showMultiPage

**Description**: Whether to show multi-page mode by default (PDF only). Default is `false`.

**Type**: `boolean`

**Default**: `false`

**Required**: No

### fitWidth

**Description**: Whether to automatically adjust the document width. Default is `false`.

**Type**: `boolean`

**Default**: `false`

**Required**: No

### needPassword

**Description**: Whether a password is required to access the document. Default is `false`. If set to `true`, you must configure the [onValidatePassword event](./events#onvalidatepassword).

**Type**: `boolean`

**Default**: `false`

**Required**: No
